<script lang="ts">
  import BasicLayout from "$lib/layout/BasicLayout.svelte";
  import LeftMenu from "./LeftMenu.svelte";
  import { initNoticeStore } from "$lib/stores/notice.svelte";
  import { appStore } from "$lib/stores/app.svelte";
  import AppConfigModal from "$lib/components/config/AppConfigModal.svelte";
  import AdminLoginModal from "$lib/components/user/AdminLoginModal.svelte";
  import { userStore } from "$lib/stores/user.svelte";
  import LoginModal from "$lib/components/user/LoginModal.svelte";
  import LogoutModal from "$lib/components/user/LogoutModal.svelte";
  import { boardStore } from "$lib/stores/board.svelte";

  let { children } = $props();

  async function init() {
    await userStore.init();
    await boardStore.init();
  }

  $effect(() => {
    init();
    const unListen = initNoticeStore();
    return () => {
      unListen.then((fn) => fn());
    };
  });
</script>

<BasicLayout>
  {#snippet left()}
    <LeftMenu />
  {/snippet}

  {#snippet content()}
    {@render children()}
  {/snippet}
</BasicLayout>

{#if appStore.showConfigModal}
  <AppConfigModal
    onClose={() => {
      appStore.showConfigModal = false;
    }}
  />
{/if}
{#if userStore.showAdminLoginModal}
  <AdminLoginModal />
{/if}
{#if userStore.showLoginModal}
  <LoginModal />
{/if}
{#if userStore.showLogoutModal}
  <LogoutModal />
{/if}
